<!--
 * @Author: your name
 * @Date: 2021-08-31 20:29:11
 * @LastEditTime: 2021-09-06 15:54:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \新建文件夹 (6)\broker\src\views\tuan\kai.vue
-->
<template>
  <div class="home">
    <div class="q1">
      <p @click="kkk" class="ee">
        <van-icon name="arrow-left" />
      </p>
      <p>开团</p>
      <p></p>
    </div>
    <div class="w1">
      <div>
        <img class="w2" :src="`http://47.111.14.227:7001`+list.img" alt />
        <b class="w3">{{list.title}}</b>
        <p class="w4">{{list.address}}</p>
        <div class="w5">
          <p>活动时间:{{list.time}}</p>
          <p class="w6">已报名：{{list.peopleNum}}</p>
        </div>
        <div class="w7">
          <b class="w9">团购介绍</b>
          <p class="w8">{{list.teamcontext}}</p>
        </div>
      </div>
    </div>
    <div class="o0">
      <div class="o9">
        <p class="o6">集合地址</p>
        <p class="o8">
          <input v-model="del" class="o7" type="text" placeholder="输入集合地址" />
        </p>
      </div>
      <div class="o9">
        <p class="o6">车辆牌号</p>
        <p class="o8">
          <input v-model="dal" class="o7" type="text" placeholder="请输入车辆牌号" />
        </p>
      </div>
      <div class="o9">
        <p class="o6">集合时间</p>
        <p class="o8">
          <input v-model="dfl" class="o7" type="text" placeholder="先择集合时间" />
        </p>
      </div>
      
    </div>
    <button class="o5" @click="uuu">开团</button>
  </div>
</template>
<script>
import axios from "../../utils/axios";
export default {
  name: "Home",
  data() {
    return {
      list: [],
      del: "",
      dal: "",
      dfl: ""
    };
  },
  created() {
    this.id = this.$route.params.id;
    console.log(this.id, 11);
    axios
      .post(`/groupDetail/`, {
        id: this.id
      })
      .then(res => {
        console.log(res);
        this.list = res.data.detail;
      });
  },
  methods: {
    uuu() {
      if (this.del === "") {
        alert("请输入集合地址,车辆牌号和时间");
      }
       else {
        alert("开团成功");
        this.$router.push("/tuan");
        window.localStorage.setItem("login", "开团");
      }
    },
    kkk() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang='css'>
.q1 {
  height: 50px;
  background-color: blue;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  /*吸顶 */
  position: sticky;
  top: 0;
  z-index: 9999;
}
.w2 {
  width: 93%;
  height: 200px;
  margin-left: 3%;
  margin-top: 10px;
}
.w3 {
  margin-left: 10px;
  margin-top: 5px;
  font-size: 20px;
}
.w4 {
  margin-left: 10px;
  margin-top: 10px;
}
.w5 {
  margin-left: 10px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.w6 {
  margin-right: 10px;
}
.w7 {
  margin-left: 10px;
  margin-top: 15px;
}
.w8 {
  margin-top: 10px;
}
.w9 {
  font-size: 20px;
}
.o9 {
  margin-left: 10px;
  margin-top: 20px;
}
.o8 {
  margin-top: 20px;
}
.o7 {
  width: 95%;
  height: 40px;
  border: 1px solid black;
}
.o6 {
  font-size: 20px;
}
.o5 {
  width: 100%;
  height: 50px;
  background-color: blue;
  color: #fff;
  margin-top: 30px;
  border: 1px solid blue;
}
.ee{
  margin-left: 10px;
}
</style>